<template>
	<!--采购订单-->

	<view class="wrapper" :style="{height:wrapperHeight +'px'}">
			<!--<view class="title-padding"></view>-->
		<view class="headerGd">
			<view class="header">
				<button class="back"></button>
				采购订单
				<button class="filter" @tap="filter()"></button>
			</view>
		</view>
		<view class="container"  :style="{height: containerHeight + 'px'}">
			<view class="curstom">
				<view class="changeList" @tap="changeListAl">
					
				</view>
				<view class="curstomName">
					{{curstomName}}
				</view>
				<view class="filterTime" style="display:flex;justify-content:space-between">
					<text>{{startTime}}</text>
					<text>{{endTime}}</text>
				</view>
			</view>
			<view class="orderList" :style="{height: orderListHeight + 'px'}" v-if="isList">
				<view class="orderNav">
					<text v-for="(item,index) in thList" :key="index">
						{{item.name}}
					</text>
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px'}">
					  <view class="orderItem" v-for="(item,index) in orderList" :key="index">
					  	<text>
					  		{{index+1}}
					  	</text>
						<text>
					  		{{item.GoodsName}}
					  	</text>
						<text>
					  		{{item.GoodsCode}}
					  	</text>
						<text>
					  		{{item.Spec==""?"无":item.Spec}}
					  	</text>
						<text>
					  		{{item.UnitName}}
					  	</text>
						<text>
					  		{{item.In_Amount}}
					  	</text>
						<text>
					  		{{item.In_Qty}}
					  	</text> 
						<text>
							{{item.In_out_Amount}}
						</text>
						<text>
							{{item.In_out_Qty}}
						</text>
						<text>
							{{item.In_out_Amount2}}
						</text>
						<text>
							{{item.In_out_Qty2}}
						</text>
					  </view>
				</view>
				<view class="allPrice">
					<text v-for="(item,index) in xjList" :key="index">
						{{item.name}}
					</text>
				</view>
			</view>
		    <view class="orderLookAllList" :style="{height: orderListHeight + 'px'}" v-if="!isList">
				 <view class="orderLookItem" v-for="(item,index) in orderList"  :class="item.lookMoreClass" :key="index">
					 <text>{{index+1}}</text>
					 <text>编号:{{item.GoodsCode}}</text>
					 <text>商品名称:{{item.GoodsName}}</text>
					 <text>单位:{{item.UnitName}}</text>
					 <text>规格:{{item.Spec}}</text>
					 <text>进货数量:{{item.In_Qty}}</text>
					 <text>进货金额:{{item.In_out_Amount}}</text>
					 <text>退货数量:{{item.In_out_Qty}}</text>
					 <text>退货金额:{{item.In_out_Amount}}</text>
					 <text>差异数量:{{item.In_out_Qty2}}</text>
					 <text>差异金额:{{item.In_out_Amount2}}</text>
					 <button class="lookMoreInfo" @tap="lookMore(index)" :class="item.openAndClose"></button>
				 </view>
			</view>
		</view>
	</view>
</template>
<script>
	import * as Api from '@/syApis/syBb/apis.js'
	export default{
		created() {
			var $this = this;
			uni.getSystemInfo({
				success(res) {
					$this.wrapperHeight = res.windowHeight;
					$this.containerHeight = res.windowHeight - 54-32.5;
					$this.orderListHeight = res.windowHeight - 104-32.5;
					$this.orderLiHeight = res.windowHeight - 104 - 80-2-32.5;
				}
			});
			let date = new Date();
			this.startTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
			this.endTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
			
			this.getCgOrder();
		},
		methods:{
			//跳转到筛选条件页
			filter(){
				uni.navigateTo({
					url:'../cgfilter/cgfilter'
				})
			},
			//获取采购订单
			getCgOrder:function(filter){
				let data = {};
				if(filter == undefined){
					data = {
						StartDate:this.startTime,
						EndDate:this.endTime
					}
				}else{
					data = filter;
				}
				var _this = this;
				Api.GetCgOrder(data,function(res){
					if(res.state){
						 if(res.data.ErrorMsg == "获取登录信息失败"){
							 
						 }else if(res.data.ErrorMsg != ""){
							 Api.showTip(res.data.ErrorMsg);
						 }else{
							 _this.orderList = res.data.ResultMsg;
							 for(var item in _this.orderList){
								 _this.orderList[item].openAndClose = "";
								 _this.orderList[item].lookMoreClass = "";
							 }
							 
						 }
					}else{
						Api.showTip("服务器开小差了");
					}
				});
			},
			lookMore:function(index){
				console.log(this.orderList);
				if(this.orderList[index].lookMoreClass!=""){
					this.orderList[index].lookMoreClass = "";
					this.orderList[index].openAndClose = "";
				}else{
					this.orderList[index].lookMoreClass = "lookMoreClass";
					this.orderList[index].openAndClose = "openAndClose";
				}
				for(var i=0;i<this.orderList.length;i++){
				     if(i!=index){
						 this.orderList[i].lookMoreClass = "";
						 this.orderList[i].openAndClose = "";
					 }	
				}
				console.log(this.orderList);
			},
			changeListAl:function(){
				this.isList = !this.isList;
			}
		},
		data(){
			return {
				orderList:[],
				containerHeight:100,
				wrapperHeight:600,
				orderListHeight:100,
				orderLiHeight:100,
				lookMoreClass:"",
				isList:true,
				openAndClose:"",
				startTime:"",
				endTime:"",
				curstomName:"全部客户",
				thList:[{
					name:"序号"
				},{
					name:"商品名称"
				},{
					name:"编号"
				},{
					name:"规格"
				},{
					name:"单位"
				},{
					name:"进货数量"
				},{
					name:"进货金额"
				},{
					name:"退货数量"
				},{
					name:"退货金额"
				},{
					name:"差异数量"
				},{
					name:"差异金额"
				}
				],
				xjList:[{
					name:"小计"
				},{
					name:"备注"
				},{
					name:"备注"
				},{
					name:""
				},{
					name:""
				},{
					name:""
				},{
					name:""
				},{
					name:""
				}
				],
				list:[{
					name:0,
					"openAndClose":"",
					"lookMoreClass":""
				},
				{
					name:0,
					"openAndClose":"",
					"lookMoreClass":""
				},{
					name:0,
					"openAndClose":"",
					"lookMoreClass":""
				}
				]
			}
		}
	}
</script>

<style lang="scss">
	/*图标的大小*/
	$iconWidth:40upx;
	$iconHeight:40upx;
	$iconBackSize:40upx;
	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}
    page{
		width: 100%;
		height: 100%;
	}
	.wrapper{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	button::after {
		border: none;
		padding: 0px;
	}
	.headerGd {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background: $bb-bg-color;
		display:table;
		.header {
			position: relative;
			text-align: center;
			font-size: 32upx;
			color: #FFF;
			.back {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/back.png) no-repeat;
				position: absolute;
				left: 20upx;
				top: 30upx;
				background-size: $iconBackSize;
			}
			.filter {
				width: $iconWidth;
				height: $iconHeight;
				position: absolute;
				right: 20upx;
				top: 30upx;
				background: url(../../static/cg/filter.png);
			}
		}
	}
	.container{
		font-size:14px;
		.curstom{
			width: 100%;
			height: 50px;
			line-height: 50px;
			display:flex;
			padding-left: 10px;
			padding-right: 10px;
			box-sizing: border-box;
			background:#030ed9;
			box-sizing: border-box;
			color:#FFF;
			.curstomName{
				flex: 1;
				text-align: center;
			}
			.filterTime{
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;
			    text{
					flex: 1;
					line-height:50upx;
					height: 50upx;
				}				
			}
			.changeList{
				width: 60upx;
				height: 60upx;
				background: url(../../static/changeIcon.png) no-repeat;
				background-size: 100%;
				margin-top: 30upx;
			}
		}
		//表格单据
		.orderList{
			width: 100%;
			overflow: auto;
			box-sizing: border-box;
			
			text{
				float: left;
				padding-left: 5px;
				padding-right: 5px;
				text-align:center;
				box-sizing: border-box;
				border-right:1px solid #ebebeb;
				&:nth-child(1){
					width: 80px;
				}&:nth-child(2){
					width: 125px;
				}&:nth-child(3){
					width:200px;
				}&:nth-child(n+4){
					width: 125px;
				}
			}
			
			.orderNav{
				height: 40px;
				line-height: 40px;
				width: 1407px;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				overflow: hidden;
				
			}
			 .orderLi{
				 width: 1407px;
				 background: #ebebeb;
				 .orderItem{
					 height: 40px;
					 line-height: 40px;
					 width: 1407px;
					 border: 1px solid #ebebeb;
					 box-sizing: border-box;
				 }
			 }
			.allPrice{
				@extend .orderNav;
				background: #030ed9;
				color:#FFF;
			}
		}
		//列表单据
		.orderLookAllList{
			  width: 100%;
			  background: #ebebeb;
			  box-sizing: border-box;
			  padding:30upx;
			  box-sizing:border-box;
		      .orderLookItem{
				  width: 100%;
				  height: 220upx;
				  overflow: hidden;
				  position: relative;
			      border-radius: 20upx;
				  background: #FFF;
				  box-sizing:border-box;
				  padding-left: 30upx;
				  padding-right:100upx ;
				  padding-top: 5upx;
				   padding-bottom: 5upx;
				   margin-bottom: 20upx;
			  }	
			  .lookMoreInfo{
			  	width: $iconWidth;
			  	height: $iconHeight;
			  	background: url(../../static/pull.png) no-repeat;
			  	position: absolute;
			  	bottom: 10upx;
			  	right: 10upx;
				padding: 0upx;
				background-size: 100% 100%;
			    transition: height 2s;
			  }
			  text{
				  display: block;
				  font-size:30upx;
				  &:nth-child(1){
				     position: absolute;
						   top: 10upx;
						   right: 10upx;
						   width: $iconWidth;
						   height: $iconHeight;
						   border-radius: 10upx;
						   text-align: center;
						   display: table;
						   color: #000;
						   line-height: $iconHeight;
						   padding: 5upx;
						
				}
				&:nth-child(n+2){
					 height: 55upx;
					 line-height: 55upx;
					 display: table;
				}
			  }
			  .lookMoreClass{
				  display: table;
				  
			  }
			  .openAndClose{
				  transform: rotate(180deg);
			  }
		}
		
	}
	
	
</style>
